<template>
  <div class="params-config-container">
    <div>{{ name }}{{ age }}</div>
    <div @click="change">change</div>
  </div>
  <hooksFun></hooksFun>
  <WatchT></WatchT>
  <WatchR></WatchR>
</template>

<script>
import { toRefs } from 'vue'
import hooksFun from './components/hooksFun.vue'
import WatchT from './components/WatchT.vue'
import WatchR from './components/WatchR.vue'
export default {
  name: 'paramsConfig',
  components: { hooksFun, WatchT, WatchR },
  setup() {
    // 当change执行的时候，响应式数据发生改变，原始数据obj也发生改变，但是UI界面不会更新
    let obj = { name: 'slice', age: 12 }
    let newObj = toRefs(obj)
    function change() {
      newObj.name.value = 'Tom'
      newObj.age.value = 24
      console.log(obj, newObj)
      //{name: 'Tom', age: 24}
      //{name: ObjectRefImpl, age: ObjectRefImpl}
    }
    return { newObj, change }
  }
}
</script>

<style lang="scss" scoped>
</style>